.animate {
	 
	width: 100%;
	background: url(../images/day1.png)  no-repeat;
	background-size:cover;
      /* animation: imgbg 8s linear infinite; */
	position: relative;
	height:800px;
}

 #codediv{
	 width: 100%;  position: absolute; top: 70%;
 }

 .sun {
	position: absolute;
	top: 320px;
	left: 00px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #f69f2d;
	box-shadow: 3px 3px 5px #fbcc90, -3px -3px 5px #fbcc90, 3px -3px 5px #fbcc90, -3px 3px 5px #fbcc90;
/* animation: movesun 8s linear infinite; */
}

.moon {
	width: 65px;
	height: 65px;
	position: absolute;
	top: 250px;
	left: 80px;
	background-image: url(../images/moon.png);
/* animation: starmoon 8s linear infinite; */

}

.moon img {
	width: 100%;
	height: 100%;
}
#codekey { 
	 
	height: 280px;
	padding: 16px;
	background-color: #fff;
}
#codekey .codekeyitem{
	width: 30%;
	height: 210px;
	float: left;
}
#codecon{
	 
	padding: 20px;
}
.fa-star {
	position: absolute;
	color: rgba(246, 247, 148, 1.0);

/* animation: starmoon 8s linear infinite; */
}

.fa-cloud {
	position: absolute;
	color: rgba(255, 255, 255, 1.0);
}

#star1 {
	top: 20px;
	left: 10%;
}

#star2 {
	top: 40px;
	left: 20%;
}

#star3 {
	top: 60px;
	left: 40%px;
}

#star4 {
	top: 40px;
	right: 25%;
}

#star5 {
	top: 150px;
	right: 15%;
}

#star6 {
	top: 10px;
	right: 10%;
}

#cloud1 {
	top: 20px;
	left: 5%;  


}

#cloud2 {
	top: 40px;
	left: 20%;  

}

#cloud3 {
	top: 60px;
	left: 40%;
}

#cloud4 {
	top: 40px;
	right: 30%;
}

#cloud5 {
	top: 150px;
	right: 13%;
}

#cloud6 {
	top: 10px;
	right: 5%;
}

@keyframes imgbg {
	0% {
		background-image: url(../images/day3.png);

	}

	16% {
		background-image: url(../images/day2.png);

	}

	33% {
		background-image: url(../images/day1.png);
	}

	50% {
		background-image: url(../images/day2.png);
	}

	67% {
		background-image: url(../images/day4.png);
	}

	83% {
		background-image: url(../images/day5.png);
	}

	100% {
		background-image: url(../images/day6.png);
	}
}

@keyframes movesun {
	0% {
		top: 320px;
		left: 0px;

	}

	16% {
		top: 220px;
		left: 16%;

	}

	33% {
		top: 120px;
		left: 33%;
		background-color: #fae034;
	}

	50% {
		top: 60px;
		left: 50%;
		background-color: #f9da0d;
		opacity: 0.5;
	}

	67% {
		top: 120px;
		left: 67%;
		background-color: #fac23b;
		opacity: 1.0;
	}

	83% {
		top: 220px;
		left: 80%;
	}

	100% {
		top:320px;
		left: 101%;

		background-color: #f69f2d;
	}

}

@keyframes starmoon {

	0% {

		opacity: 0;

	}

	16% {
		opacity: 0;

	}

	33% {
		opacity: 0.1;
		transform: rotate(30deg);
	}

	50% {

		opacity: 0.4;transform: rotate(90deg);
	}

	67% {

		opacity: 0.7;transform: rotate(150deg);
	}

	83% {
		opacity: 0.9;
		transform: rotate(210deg);

	}

	100% {

		opacity: 1;transform: rotate(260deg);

	}


}


@keyframes cloud {

	0% {

		opacity: 0.5;



	}

	16% {
		opacity: 0.8;



	}

	33% {
		opacity: 1;


	}

	50% {

		opacity: 0.5;

	}

	67% {

		opacity: 0.1;


	}

	83% {
		opacity: 0;

	}

	100% {

		opacity: 0;

	}


}

@keyframes movecloud1 {
	0% {
		left: 5%;
	}

	16% {
		left: 20%;
	}

	33% {
		left: 47%;
	}

	50% {
		left: 69%;
	}

	67% {
		left: 91%;
	} 

	100% {
		left: 100%;
	}

}

@keyframes movecloud2 {
	0% {
		left: 23%;
	}

	16% {
		left: 45%;
	}

	33% {
		left: 67%;
	}

	50% {
		left: 79%;
	}

	 
	100% {
		left: 102%;
	}

}

@keyframes movecloud3 {
	0% {
		left: 4%;
	}

	16% {
		left: 55%;
	}

	33% {
		left: 87%;
	}

	50% {
		left: 99%;
	} 
 
	100% {
		left: 101%;
	}

}

@keyframes movecloud4 {
	0% {
		right: 33%;
	}

	25% {
		right: 25%;
	}



	50% {
		right: 17%;
	}



	75% {
		right: 9%;
	}

	100% {
		right: -1%;
	}
}

@keyframes movecloud5 {
	0% {
		right: 13%;
	}


	50% {
		right: 8%;
	}



	100% {
		right: -1%;
	}
}

@keyframes movecloud6 {
	0% {
		rigth: 3%;
	}
	100% {
		rigth: -1%;
	}
}
